<template>
    <div v-if="colorOption" class="render-color">
        <template v-if="gradient">
            <span class="w-full" :style="{ background: `linear-gradient( to right, ${colorOption.join(', ')} )` }" />
        </template>
        <template v-for="(item, index) in colorOption" v-else :key="item + index">
            <span :style="{ 'background-color': item, width: colorwidth }" />
        </template>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Props {
    colorOption?: any[]
    gradient?: boolean
}
const props = withDefaults(defineProps<Props>(), {
    colorOption: () => [],
    gradient: false,
})
const colorwidth = ref()
colorwidth.value = 100 / props.colorOption.length + '%'
</script>

<style scoped lang="scss">
.render-color {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    span {
        display: inline-block;
        width: 100%;
        height: 4px;
    }
}
</style>
